<template>
  <main class="main">
    <!-- 右边内容部分 -->
    <div class="main-content">
      <div class="main-left">
        <div class="left-content">
          <!-- 顶部工具类-推荐/关注 -->
          <div>
            <!-- 设置黏性对齐 -->
            <div class="back_page">
              <div class="back_btn" :title="$t('index.back')">
                <div @click="back">
                  <i class="el-icon-arrow-left"></i>{{ $t("index.back") }}
                </div>
              </div>
            </div>
            <div class="user_bg_panel">
              <!-- 图片背景 -->
              <div class="user_bg_img">
                <img :src="userBackGroupImage" alt="" />
              </div>
            </div>
            <!-- 头像 信息 操作 -->
            <div class="user_profile">
              <div class="user_avatar">
                <img :src="userHeaderImg" alt="" />
              </div>
            </div>
            <!-- 昵称信息及相关操作按钮 -->
            <div class="user_box_item">
              <div>
                <div class="name">{{ nickname }}</div>
                <div class="account">@{{ account }}</div>
                <div class="user_fo_info">
                  <!-- 关注者 -->
                  <div class="fo">
                    <router-link :to="'/YouFansList/' + user_id + '/4'">
                      <div class="txt">{{ $t("user.fo") }}</div>
                      <div>
                        <span>{{ user_fo }}</span>
                      </div>
                    </router-link>
                  </div>
                  <!-- 粉丝 -->
                  <div class="fans">
                    <router-link :to="'/YouFansList/' + user_id + '/2'">
                      <div class="txt">{{ $t("user.fans") }}</div>
                      <div>
                        <span>{{ user_fans }}</span>
                      </div>
                    </router-link>
                  </div>
                </div>
              </div>
              <div class="opr">
                <div class="ex-btn">
                  <!-- 关注 -->
                  <div v-if="is_fo == 1">
                    <button
                      class="el_btn"
                      @click="cancelfoUser"
                      slot="reference"
                    >
                      {{$t('personal.btn.following')}}
                    </button>
                  </div>
                  <div v-else-if="is_fo == 2">
                    <button
                      class="el_btn"
                      @click="cancelfoUser"
                      slot="reference"
                    >
                    {{$t('personal.btn.following')}}
                    </button>
                  </div>
                  <div v-else-if="is_fo == 3">
                    <button class="el_btn" @click="foUser" slot="reference">
                      {{$t('personal.btn.follow')}}
                    </button>
                  </div>
                  <div v-else>
                    <button class="el_btn" @click="foUser" slot="reference">
                      {{$t('personal.btn.follow')}}
                    </button>
                  </div>
                </div>
                <div class="ex-message">
                  <el-button
                    size="mini"
                    icon="el-icon-message"
                    circle
                  ></el-button>
                </div>
                <div class="more">
                  <!-- el-icon-more -->
                  <el-popover
                    placement="bottom-end"
                    width="150"
                    trigger="click"
                  >
                    <el-button
                      size="mini"
                      icon="el-icon-more"
                      slot="reference"
                      circle
                    ></el-button>
                    <!-- 弹出内容 -->
                    <div class="black_list_btn">{{$t('personal.btn.add_blacklist')}}</div>
                  </el-popover>
                </div>
              </div>
            </div>
            <!-- 头像 信息 操作结束 -->
            <!-- 其他信息 -->
            <div class="user_details">
              <div>
                <el-collapse>
                  <el-collapse-item title="简介" name="1">
                    <div>{{ user_info }}</div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
            <!-- 贴文列表 -->
            <div class="infinite-list-panel">
              <div class="infinite-list">
                <!-- 这里触发组件同步更新必须更改key的值为可变 -->
                <div
                  class="list-item"
                  v-for="item in userData.userDataList"
                  :key="item.post_id + Math.random() * 10"
                >
                  <PostList :postData="item" />
                </div>
              </div>
              <p class="loading" v-if="userData.loading">加载中...</p>
              <p class="addload" v-if="!noMore" @click="loadingData">
                点击加载更多
              </p>
              <p class="nomore" v-if="noMore">没有更多了</p>
            </div>
          </div>
        </div>
      </div>
      <MainRight />
    </div>
  </main>
</template>
<script>
import PostList from "@/components/PostList.vue";
//MainRight
import MainRight from "@/components/MainRight.vue";

export default {
  name: "PersonMainContent",
  components: {
    PostList,
    MainRight,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      user_id: this.$route.params.id,
      current_user_id: JSON.parse(localStorage.getItem("user")).user_id
        ? JSON.parse(localStorage.getItem("user")).user_id
        : 1,
      userBackGroupImage: require("@/assets/img/p_bg.png"),
      userHeaderImg: require("@/assets/img/user.png"),
      nickname: "昵称",
      account: "account",
      UserInfo: {
        user_id: this.$route.params.id,
      },
      user_fo: "",
      user_fans: "",
      user_info: "",
      decimals: 2, //保留小数位
      userData: {
        currentPage: 1, //起始页数值为1
        loading: false,
        pageSize: 10, //每页查询条数
        pageTotal: 1, //取后端返回内容的总页数
        //测试数据
        userDataList: [
          // { user_id: 1, username: "e4glet", user_nickname: "eaglet",user_headimg:"",user_bgimg:"",user_info:"测试介绍1",user_fo:12,user_fans:500,post_content:"测试内容1",zf_counts:0,tp_url:"http://localhost:8080/img/2023-10-24/8fdaccb2-dfe0-4377-ad30-6413d0a9272e.png",sp_url:"",post_time:"2023-10-24 14:20:02" },
          // { user_id: 1, username: "e4glet", user_nickname: "eaglet",user_headimg:"",user_bgimg:"",user_info:"测试介绍2",user_fo:12,user_fans:500,post_content:"测试内容2",zf_counts:0,tp_url:"http://localhost:8080/img/2023-10-24/9551c6c3-a386-44da-850b-8c71d210b104.jpg|http://localhost:8080/img/2023-10-24/8fdaccb2-dfe0-4377-ad30-6413d0a9272e.png",sp_url:"" ,post_time:"2023-10-24 14:20:02"},
          // { user_id: 1, username: "e4glet", user_nickname: "eaglet",user_headimg:"",user_bgimg:"",user_info:"测试介绍3",user_fo:12,user_fans:500,post_content:"测试内容3",zf_counts:0,tp_url:"",sp_url:"http://localhost:8080/video/2023-10-24/b1618202-b0f8-4cc8-83a2-1b50ee284ce8.mp4",post_time:"2023-10-24 14:20:02"},
        ],
      },
      is_fo: 0, //是否关注
      postForm: {
        post_user_id: this.user_id ? this.user_id : 1,
        current_user_id: this.current_user_id ? this.current_user_id : 1,
      },
    };
  },
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.userData.currentPage >= this.userData.pageTotal;
    },
    addMore() {
      return !this.noMore();
    },
  },
  mounted() {
    this.reloading();
  },
  methods: {
    loadingData() {
      this.userData.loading = true;
      setTimeout(() => {
        this.userData.currentPage += 1; //页数+1
        this.getUserPostDataByUserId(); //调用接口，此时页数+1，查询下一页数据
      }, 1000);
    },
    reloading() {
      this.getUserInfoById();
      this.getUserPostDataByUserId();
      this.getIsFoByCurrentUserId();
    },
    back() {
      this.$router.go(-1);
    },
    //根据用户id获取用户动态信息
    async getUserInfoById() {
      let res = await this.$http.post("getInfoByUserId", this.UserInfo);
      if (res.state == 200) {
        if (res.data == null) {
          this.$router.push("/404");
          return;
        }
        this.userBackGroupImage = res.data.user_bgimg
          ? res.data.user_bgimg
          : require("@/assets/img/p_bg.png");
        this.userHeaderImg = res.data.user_headimg
          ? res.data.user_headimg
          : require("@/assets/img/user.png");
        (this.nickname = res.data.user_nickname
          ? res.data.user_nickname
          : "昵称"),
          (this.account = res.data.username ? res.data.username : "账号"),
          (this.user_fo = this.formatCount(
            res.data.user_fo ? res.data.user_fo : 0
          ));
        this.user_fans = this.formatCount(
          res.data.user_fans ? res.data.user_fans : 0
        );
        this.user_info = res.data.user_info
          ? res.data.user_info
          : "该用户比较懒，什么都没写。";
      }
    },
    async reloadUserPostData() {
      let params = {
        user_id: this.user_id,
        currentPage: 1,
        pageSize: this.userData.pageSize, //每页查询条数
      };
      let res = await this.$http.post("getUserPostDataByUserId", params);
      console.log(res.data);
      if (res.state == 200) {
        //存放数据的列表累加
        this.userData.userDataList = res.data.data;
        this.userData.pageTotal = res.data.pageTotal;
        this.userData.loading = false;
      }
    },
    async getUserPostDataByUserId() {
      let params = {
        user_id: this.user_id,
        currentPage: this.userData.currentPage,
        pageSize: this.userData.pageSize, //每页查询条数
      };
      let res = await this.$http.post("getUserPostDataByUserId", params);
      // console.log(res.data);
      if (res.state == 200) {
        //存放数据的列表累加
        this.userData.userDataList = this.userData.userDataList.concat(
          res.data.data
        );
        this.userData.pageTotal = res.data.pageTotal;
        this.userData.loading = false;
      }
    },
    //查询当前用户是否关注了当前发帖人
    async getIsFoByCurrentUserId() {
      this.postForm.post_user_id = this.user_id;
      this.postForm.current_user_id = this.current_user_id;

      let res = await this.$http.post("getIsFoByCurrentUserId", this.postForm);

      if (res.state == 200) {
        this.is_fo = res.data;
      }
    },
    //点击关注
    async foUser() {
      this.postForm.post_user_id = this.user_id;
      this.postForm.current_user_id = this.current_user_id;

      let res = await this.$http.post("addUserFoPostUser", this.postForm);
      if (res.state == 200) {
        this.reloading();
        this.$message({
          message: res.message,
          type: "success",
        });
      } else {
        this.$message.error(res.message);
      }
    },
    //取消关注
    async cancelfoUser() {
      this.postForm.post_user_id = this.user_id;
      this.postForm.current_user_id = this.current_user_id;

      let res = await this.$http.post("cancelUserFoPostUser", this.postForm);
      if (res.state == 200) {
        this.reloading();
        this.$message({
          message: res.message,
          type: "success",
        });
      } else {
        this.$message.error(res.message);
      }
    },
    //关注/被关注数量格式化
    formatCount(counts) {
      const number = counts;
      let endValue;
      //为空
      if (!number) {
        return 0;
      }
      //小于1000
      if (number < 1000) {
        endValue = number;
      }
      //大于1000
      if (number >= 1000) {
        endValue = new Intl.NumberFormat().format(number);
      }
      //大于10000
      if (number > 10000) {
        endValue = (number / 10000).toFixed(this.decimals) + "万";
      }
      //大于一千万
      if (number > 10000000) {
        endValue = (number / 10000000).toFixed(this.decimals) + "千万";
      }
      //大于一亿
      if (number > 100000000) {
        endValue = (number / 100000000).toFixed(this.decimals) + "亿";
      }
      return endValue;
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 右侧主内容 */
.main {
  width: 990px;
  min-height: 415px;
  padding: 0 10px;
}

.main-content {
  display: flex;
  justify-content: space-between;
}

/* 内容左侧样式 */
.main-left {
  max-width: 600px;
  background-color: #ffffff;
  border-radius: 5px;
  margin-right: 15px;
}

.left-content {
  width: 600px;
}

/* 顶部用户背景及信息 */
.user_bg_panel {
  border-radius: 10px;
  display: flex;
}

.back_page {
  position: sticky;
  /* 不要忘了设置 top */
  top: 0;
  padding: 10px 10px;
  background-color: rgba(255, 255, 255, 0.75);
  color: #000;
  z-index: 299;
  margin-bottom: -41px;
  box-shadow: 0px 1px 3px #939393;
}

.back_btn {
  cursor: pointer;
  display: flex;
  height:21px;
}

.nickname {
  font-weight: 700;
}

.user_box_item .account {
  color: rgb(83, 100, 113);
  font-size: 15px;
  font-weight: 400;
  margin: 5px 0 10px 0;
}

.user_bg_img {
  position: relative;
  height: 361px;
  flex: 1;
}

.user_bg_img img {
  object-fit: cover;
  border-radius: inherit;
  height: 361px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.user_profile,
.user_box_item {
  margin: 10px 20px 10px 22px;
  display: flex;
}

.user_avatar {
  margin: -50px 20px 0 0;
  padding: 1px;
  background: #fff;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  z-index: 10;
}

.user_avatar img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
}

/* 个人信息 */
.user_box_item {
  display: flex;
  justify-content: space-between;
  /* 子容器设置flex:1 自动占据改行全部空间 */
  flex: 1;
}

.user_box_item .name {
  max-width: 80%;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 20px;
  font-size: 16px;
  font-weight: 700;
}

.user_box_item .user_fo_info {
  display: flex;
  font-size: 14px;
  color: #939393;
}

.user_fo_info .fans {
  margin-right: 15px;
}

.fans,
.fo {
  display: flex;
  line-height: 16px;
  margin-right: 15px;
}

.fans a,
.fo a {
  display: flex;
  color: #000000;
  font-weight: 700;
}

.fo a .txt,
.fans a .txt {
  color: #939393;
  margin-right: 5px;
}

.user_box_item .opr {
  display: flex;
}

.opr .ex-btn,
.opr .ex-message {
  margin-right: 10px;
}

/* 详细信息内容 */
.user_details {
  display: flex;
  padding: 15px 18px;
}

.user_details > div {
  flex: 1;
}

.is-active {
  font-weight: bold;
}

/* 新增帖子数量样式 */
.post_new_counts {
  text-align: center;
  border-bottom: 1px solid rgb(239, 243, 244);
  line-height: 48px;
  color: rgb(29, 155, 240);
  cursor: pointer;
}

/* 备注：应用下拉加载的外层容器必须设置固定高度，否则会自动无限加载 */
.infinite-list-panel {
  overflow: hidden;
}

.infinite-list {
  overflow: auto;
  /* height: 100vh; */
}

.infinite-list-panel .addload {
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  color: rgb(29, 155, 240);
  font-weight: 700;
}

.infinite-list-panel .loading,
.infinite-list-panel .nomore {
  text-align: center;
  padding: 10px 0;
  font-weight: 700;
}

.NoData {
  padding: 10px 0;
  text-align: center;
  font-weight: 700;
}

.el_btn {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 20px;
}

.el_btn:hover {
  color: rgb(64, 158, 255);
  border: 1px solid rgb(64, 158, 255);
  background: rgba(64, 158, 255, 0.1);
}

.black_list_btn{
  padding:10px;
}

@media screen and (max-width: 720px) {
  .main {
    width: 100%;
    padding: 0;
    margin-bottom: 52px;
  }
  .main-left {
    width: 100%;
    margin-right: 0px;
    min-width: 390px;
  }

  .left-content {
    width: 100%;
  }

  .user_avatar {
    margin: -35px 20px 0 0;
    padding: 1px;
    width: 60px;
    height: 60px;
  }

  .user_avatar img {
    width: 60px;
    height: 60px;
  }

  .user_fo_info .fans {
    margin-right: 10px;
  }

  .fans,
  .fo {
    font-size: 12px;
    display: block;
  }

  .fans a,
  .fo a {
    margin-left: 0px;
  }
}

@media (max-width: 1050px) {
  .main {
    max-width: 600px;
  }
  .main-right {
    display: none;
    width: auto;
  }
}

@media (max-width: 1300px) {
}
</style>
